<template>
  <div class="flex flex-col h-full">
    <div class="h-16">
      <div class="w-[616px] h-full bg-first-title bg-size-full">
        <div class="pl-[60px] text-[40px] text-white font-[YouSheBiaoTiHei]">采购待发运量</div>
      </div>
    </div>
    <div class="flex flex-1 mt-10 bg-module4-bg bg-size-full">
      <div class="w-1/2 pl-20" ref="chart1"></div>
      <div class="w-1/2" ref="chart2"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

onMounted(() => {
  drawFigure();
});

const chart1 = ref<HTMLDivElement | null>(null);
const chart2 = ref<HTMLDivElement | null>(null);

const options1 = {
  legend: {
    orient: 'vertical',
    x: 'left',
    y: 'center',
    icon: 'circle',
    data: ['原料类', '辅料类', '燃料类', '耐火材料', '合金类', '其它类'],
    textStyle: {
      color: '#fff',
      fontSize: 28
    },
    itemGap: 40,
    formatter: (name: string) => {
      const data: any[] = options1.series[0].data;
      const total = data.reduce((acc, cur) => acc + cur.value, 0);
      const target = data.find((item) => item.name === name);
      const percent = ((target?.value || 0) / total) * 100;
      return `${name.padEnd(15 - name.length * 2)}${(percent.toFixed(2) + '%').padEnd(
        10
      )}${target?.value}t`;
    }
  },
  tooltip: {
    backgroundColor: 'transparent',
    textStyle: {
      color: '#00ff00',
      fontSize: 28
    }
  },
  series: [
    {
      type: 'pie',
      color: ['#6dadfc', '#c2c230', '#fa773e', '#e5395c', '#7ef6fc', '#773efa'],
      radius: ['55%', '65%'],
      avoidLabelOverlap: false,
      left: 300,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        scaleSize: 16
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        borderWidth: 8,
        borderColor: '#04183b'
      },
      data: [
        { value: 5000, name: '原料类' },
        { value: 2500, name: '辅料类' },
        { value: 5000, name: '燃料类' },
        { value: 5000, name: '耐火材料' },
        { value: 2500, name: '合金类' },
        { value: 5000, name: '其它类' }
      ]
    },
    {
      name: '水球图',
      type: 'liquidFill',
      radius: '50%',
      center: ['63.8%', '50%'],
      data: [0.3],
      color: [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#8BA2FC'
          },
          {
            offset: 1,
            color: '#3F64FA'
          }
        ])
      ],
      backgroundStyle: {
        color: '#202a57'
      },
      label: {
        formatter: '289,720',
        fontSize: 75,
        color: '#fff',
        fontFamily: 'DS-Digital'
      }
    }
  ]
};

const options2Data = [120, 200, 150, 80, 70, 110, 130];
const options2 = {
  xAxis: {
    type: 'value',
    axisLabel: {
      color: 'rgba(255,255,255,0.7)',
      fontSize: 24
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#314698'
      }
    },
    // 最大值
    max: options2Data.reduce((acc, cur) => Math.max(acc, cur), 0) * 1.2
  },
  yAxis: {
    type: 'category',
    data: ['废钢类', '生铁类', '硅铁合金', '特种合金', '锰铁合金', '硅锰合金', '其它'],
    axisLabel: {
      color: 'rgba(255,255,255,0.7)',
      fontSize: 24
    }
  },
  grid: {
    left: 150,
    right: 100,
    top: 50,
    bottom: 100
  },
  series: [
    {
      data: options2Data,
      type: 'bar',
      barWidth: 20,
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: '#162F94'
        },
        {
          offset: 1,
          color: '#B2C2FF'
        }
      ]),
      showBackground: true,
      backgroundStyle: {
        color: '#14204b'
      },
      label: {
        show: true,
        distance: 10,
        position: 'right',
        color: '#fff',
        fontSize: 24
      }
    }
  ]
};

const drawFigure = () => {
  const myChart1 = echarts.init(chart1.value!);
  const myChart2 = echarts.init(chart2.value!);
  myChart1.setOption(options1);
  myChart2.setOption(options2);
};
</script>

<style lang="scss" scoped></style>
